<template>
  <transition name="slide-fade">
    <div
      v-if="id && visible"
      class="x-container"
      :style="{ 'z-index': zIndex }"
    >
      <el-button
        class="close-btn"
        type="primary"
        icon="el-icon-close"
        @click="close"
      />
      <el-card id="slide" ref="slide" class="box-card">
        <div slot="header" class="clearfix">
          <div class="head-top">
            <img :src="require('@/assets/img/duty.png')" alt="" />
            <span>{{ detail.pathname }}</span>
          </div>
          <div class="head-bottom u-flex">
            <div class="row u-flex">
              <el-avatar :size="40" class="user-avatar">{{
                detail.exename.slice(0, 1)
              }}</el-avatar>
              <div>
                <span class="content">{{ detail.exename }}</span>
                <span class="label">执行人</span>
              </div>
            </div>

            <div class="row u-flex">
              <el-avatar
                :size="40"
                class="user-avatar"
                style="background: #27ae60"
              >
                <i class="el-icon-check" />
              </el-avatar>
              <div>
                <span class="content">{{ detail.exestart }}</span>
                <span class="label">开始执行时间</span>
              </div>
            </div>

            <div class="row u-flex">
              <el-avatar
                :size="40"
                class="user-avatar"
                style="background: #e67e22"
              >
                <i class="el-icon-minus" />
              </el-avatar>
              <div>
                <span class="content">{{ detail.exeend }}</span>
                <span class="label">结束执行时间</span>
              </div>
            </div>
          </div>
        </div>

        <div class="d-container-bd">
          <el-table
            v-loading="listLoading"
            :data="tableData"
            element-loading-text="加载中"
            :height="tableHeight"
            use-virtual
            stripe
            border
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              show-overflow-tooltip
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column label="路线名称" align="center" fixed>
              <template slot-scope="scope">
                {{ detail.pathname }}
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.itemname }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.createt }}</span>
              </template>
            </el-table-column>
            <el-table-column label="执行人" align="center">
              <template slot-scope="scope">
                {{ scope.row.exename }}
              </template>
            </el-table-column>
            <el-table-column label="执行时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.exet }}
              </template>
            </el-table-column>
            <el-table-column label="区域" align="center">
              <template slot-scope="scope">
                {{ scope.row.zonename }}
              </template>
            </el-table-column>
            <el-table-column
              class-name="status-col"
              label="任务状态"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag :type="scope.row.itemstatus | statusFilter">{{
                  scope.row.itemstatus | formatStatus
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="130"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  class="xm-btn--primary"
                  type="primary"
                  size="mini"
                  @click="handleView(scope.$index, scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </transition>
</template>

<script>
import { getMaxIndex } from "@/utils/index";
import { getActItemsByActPathIdAPI } from "@/api/inspection";
import DetailMixins from "@/views/mixins/Detail";

export default {
  name: "InspectionSystemDetail",

  mixins: [DetailMixins],

  data() {
    return {
      zIndex: getMaxIndex(),
      tableData: [],
      listLoading: true,
      tableHeight: document.documentElement.clientHeight - 264 + "px",
    };
  },

  props: {
    /** 任务ID */
    id: [String, Number],

    visible: {
      type: Boolean,
      default: false,
    },
    /**选中行内容 */
    detail: [Object],
  },

  mounted() {},

  watch: {
    id: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getDutyById(newVal);
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    close() {
      this.$emit("close");
    },
    /**获取详情 */
    getDutyById(id) {
      getActItemsByActPathIdAPI({ actpathid: id }).then((res) => {
        this.tableData = res.Data;
        this.listLoading = false;
      });
    },

    /**查看 */
    handleView(index, row) {
      this.$emit("handleItem", { actitemid: row.actitemid });
    },
  },
};
</script>

<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
}
.x-container {
  position: fixed;
  min-width: 600px;
  width: 65%;
  height: calc(100vh - 50px);
  top: 50px;
  bottom: 0px;
  right: 0px;
}
.close-btn {
  position: absolute;
  top: 160px;
  left: -40px;
  z-index: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px;

  ::v-deep {
    i {
      font-size: 26px;
    }
  }
}

.box-card {
  width: 100%;
  height: 100%;
  font-size: 13px;
  background: #f5f6f9;

  .clearfix {
    background: #fff;
    .head-top {
      position: relative;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
      span {
        position: absolute;
        bottom: 5px;
      }
    }

    .head-bottom {
      padding-top: 30px;
      padding-bottom: 20px;
      .row {
        margin-right: 30px;
        min-width: 300px;
        border-right: 1px solid rgb(202, 198, 198);
        box-sizing: border-box;
        padding-right: 30px;
        .user-avatar {
          margin-right: 20px;
        }
        span {
          display: block;
          font-size: 15px;
        }
        .label {
          color: #999;
          margin-top: 10px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>